<template>
  <div class="wrapper">
    <el-form>
      <table border="1" style="width:100%;border:1px solid #e4e4e4">
        <tr height="50">
          <td class="px-2 w140 text-right">* 工单分类：</td>
          <td style="padding:0 10px">
            <el-select v-model="work.Classify" class="w-100" size="small">
              <el-option label="配电箱" value="5"></el-option>
            </el-select>
          </td>
          <td class="px-2 w140 text-right">* 信息来源:</td>
          <td style="padding:0 10px">
            <el-select v-model="work.Source" class="w-100" disabled size="small">
              <el-option label="设备报警" value="2"></el-option>
            </el-select>
          </td>
        </tr>
        <tr height="50">
          <td class="px-2 w140 text-right">* 工单级别:</td>
          <td style="padding:0 10px">
            <el-select v-model="work.Level" class="w-100" size="small">
              <el-option label="普通" value="3"></el-option>
              <el-option label="次紧急" value="2"></el-option>
              <el-option label="紧急" value="1"></el-option>
            </el-select>
          </td>
          <td class="px-2 w140 text-right">* 指派责任区:</td>
          <td style="padding:0 10px">
            <el-tooltip class="item" :content="errors.first('workAssignedAreaId')" :value="errors.has('workAssignedAreaId')" :manual="true">
              <el-form-item style="margin:0" required :class="{'is-error':errors.has('workAssignedAreaId')}">
                <el-select v-model="work.AssignedAreaId" class="w-100" size="small" @change="changearea" name="workAssignedAreaId"  v-validate="'required'">
                  <el-option v-for="(item,index) in areas" :key="index" :label="item.Name" :value="item.Id"></el-option>
                </el-select>
              </el-form-item>
            </el-tooltip>
          </td>
        </tr>
        <tr height="50">
          <td class="px-2 w140 text-right">指派处理人:</td>
          <td style="padding:0 10px">
            <el-select v-model="work.AssignedUserId" class="w-100" size="small" @change="changeUser" >
              <el-option v-for="(item,index) in UserId" :key="index" :label="item.Name" :value="item.Id"></el-option>
            </el-select>
          </td>
          <td class="px-2 w140 text-right">工单接收人号码：</td>
          <td style="padding:0 10px">
            <el-tooltip :content="errors.first('SmsPhone')" :value="errors.has('SmsPhone')" :manual="true">
              <el-input placeholder="请输入内容" class="input-with-select w-100" size="small" v-model="work.SmsPhone"
                        :class="{'is-error':errors.has('SmsPhone')}" v-validate="'smsPhone'" name="SmsPhone"></el-input>
            </el-tooltip>
          </td>
        </tr>
        <tr height="50">
          <td class="px-2 w140 text-right">* 派遣时间:</td>
          <td style="padding:0 10px">
            <el-tooltip :content="errors.first('StartTime')" :value="errors.has('StartTime')" :manual="true">
              <el-date-picker v-model="work.StartTime" type="datetime" size="small" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" class="w190"
              :class="{'is-error':errors.has('StartTime')}" v-validate="'required'" name="StartTime"></el-date-picker>
            </el-tooltip>
<!--            <el-date-picker v-model="work.StartTime" type="datetime" size="small" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" class="w190"></el-date-picker>-->
          </td>
          <td class="px-2 w140 text-right">* 办理时限:</td>
          <td style="padding:0 10px">
            <el-tooltip class="item" :content="errors.first('workEndTime')" :value="errors.has('workEndTime')" :manual="true">
              <el-date-picker v-model="work.EndTime" type="datetime"  value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" size="small" class="w190"
                              :class="{'is-error':errors.has('endTime')}" name="endTime"></el-date-picker>
            </el-tooltip>
          </td>
        </tr>
        <tr height="100">
          <td class="px-2 w140 text-right">* 工单内容:</td>
          <td style="padding:0 10px" colspan="3" class="py-2">
            <el-tooltip class="item" :content="errors.first('workContent')" :value="errors.has('workContent')" :manual="true">
              <el-form-item style="margin:0" required :class="{'is-error':errors.has('workContent')}">
                <el-input resize="none" type="textarea" rows="4" placeholder="请输入内容" v-model="work.Content"  v-validate="'required'" name="workContent"></el-input>
              </el-form-item>
            </el-tooltip>
          </td>
        </tr>
        <tr></tr>
        <tr height="50">
          <td class="px-2 w140 text-right">上传图片:</td>
          <td style="padding:0 10px" colspan="3"><input type="file" multiple="multiple" style="width:98%;" id="file_0" @change="uploadFiles($event)"></td>
        </tr>
      </table>
    </el-form>
      <div class="d-flex" style="width:170px;margin:30px auto 0 auto">
        <el-button class="ur-btn ur-btn-primary w80" @click="Create"><i class="iconfont icon-queding"></i>确定</el-button>
        <el-button class="ur-btn ur-btn-primary w80" @click="closeWorkDialog()"><i class="iconfont icon-close1"></i>取消</el-button>
      </div>
  </div>
</template>

<script>
  import api from 'api/api'

  export default {
    components: {},
    props: {
      areas: {},
      data: {}
    },
    data() {
      return {
        People: [],
        work: { "Source": '2', Classify: '5', Level: '1',},
        phone: [],
        file: [],
        UserId:[]
      }
    },
    watch: {},
    computed: {},
    methods: {
      uploadFiles(event) {
        if (event.target.files && ['jpg', 'png', 'jpeg'].indexOf(event.target.files[0].name.split('.')[1]) === -1) {
          this.$message.error('文件类型不符合')
          return false
        } else {
         this.file = event.target.files;
        }
      },
      changearea() {
        let self = this;
        api.fetchSimple('/User/QueryUserByArea', { areaId: this.work.AssignedAreaId}).then(r => {
          this.UserId = r.data;
          //this.work.AssignedUserId = r.data[0].Id;
          r.data.map(function (e) {
            self.People[e.Id] = e.Name
            self.phone[e.Id] = e.Mobile
          })
        })
        //this.work.AssignedUserId = this.People[this.work.AssignedAreaId]
        //this.work.SmsPhone = this.phone[this.work.AssignedAreaId]
      },
      changeUser() {
        this.work.SmsPhone = this.phone[this.work.AssignedUserId]
      },
      Create() {
       let _this=this
        this.$validator.validateAll().then((res) => {
          if (res) {
            api.fetch("/Workorder/Create?source=1&&devNo=" + this.data.No, this.work).then(r => {
              if (r) {
                if (_this.file.length != 0) {
                  var formData = new FormData();
                  for (let i = 0; i < _this.file.length; i++) {
                    formData.append("files", _this.file[i]);
                  }
                  var o = { url: 'Workorder/SaveWorkFiles?workId=' + r.data, data: formData }
                  api.ajaxFormFile(o, function (r) {
                    if (r) {
                      _this.$message.success('派单成功');
                      _this.closeWorkDialog();
                      _this.WorkDialog()
                    }
                  })
                } else {
                  _this.$message.success('派单成功');
                  _this.closeWorkDialog();
                  _this.WorkDialog()
                }
              }
            })
          }
        })
      },
      closeWorkDialog() {
        this.$emit('closeWorkDialog', false)
      },
      WorkDialog() {
        this.$emit('WorkDialog', true)
      },
      async queryWorkConten(){
        let res = await api.fetchSimple('/History/QueryRtuAlarmDesc', {rtuId: this.data.RtuId})
        this.$set(this.work,'Content',res.data)
      }
    },
    created() {
      this.work.StartTime = api.formatDate(new Date(),'yyyy-MM-dd HH:mm:ss')
      this.queryWorkConten()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  table head{
  display:none
  }
</style>
